<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>钓友社区 - 鱼情助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        .glass-effect {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        .tab-active {
            background: rgba(255, 255, 255, 0.3);
            border-bottom: 2px solid white;
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 顶部导航 -->
    <div class="fixed top-0 left-0 right-0 z-50 glass-effect">
        <div class="flex items-center justify-between p-4">
            <a href="index.html" class="text-white text-xl">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1 class="text-white text-lg font-semibold">钓友社区</h1>
            <button class="text-white text-xl" onclick="openPostModal()">
                <i class="fas fa-plus"></i>
            </button>
        </div>
    </div>

    <!-- 标签页导航 -->
    <div class="fixed top-16 left-0 right-0 z-40 glass-effect">
        <div class="flex items-center p-2">
            <button class="tab-btn flex-1 py-2 px-4 text-white text-center tab-active" data-tab="posts">
                <span>动态</span>
            </button>
            <button class="tab-btn flex-1 py-2 px-4 text-white text-center" data-tab="topics">
                <span>话题</span>
            </button>
            <button class="tab-btn flex-1 py-2 px-4 text-white text-center" data-tab="ranking">
                <span>排行</span>
            </button>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="pt-32 pb-24 px-4">
        <!-- 动态内容 -->
        <div id="posts-content" class="tab-content">
            <!-- 推荐用户 -->
            <div class="glass-effect rounded-2xl p-4 mb-6 text-white">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold">推荐钓友</h2>
                    <button class="text-sm text-blue-200">更多</button>
                </div>
                <div class="flex space-x-4 overflow-x-auto">
                    <div class="flex-shrink-0 text-center">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=60&h=60&fit=crop&crop=face" 
                             class="w-12 h-12 rounded-full border-2 border-white mb-2">
                        <div class="text-xs">钓鱼达人</div>
                    </div>
                    <div class="flex-shrink-0 text-center">
                        <img src="https://images.unsplash.com/photo-1494790108755-2616b612b05b?w=60&h=60&fit=crop&crop=face" 
                             class="w-12 h-12 rounded-full border-2 border-white mb-2">
                        <div class="text-xs">西湖老钓</div>
                    </div>
                    <div class="flex-shrink-0 text-center">
                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=60&h=60&fit=crop&crop=face" 
                             class="w-12 h-12 rounded-full border-2 border-white mb-2">
                        <div class="text-xs">钓王张三</div>
                    </div>
                    <div class="flex-shrink-0 text-center">
                        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=60&h=60&fit=crop&crop=face" 
                             class="w-12 h-12 rounded-full border-2 border-white mb-2">
                        <div class="text-xs">鱼儿专家</div>
                    </div>
                </div>
            </div>

            <!-- 动态列表 -->
            <div class="space-y-4">
                <!-- 动态1 -->
                <div class="glass-effect rounded-2xl p-4 text-white card-hover">
                    <div class="flex items-center space-x-3 mb-3">
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&h=40&fit=crop&crop=face" 
                             class="w-10 h-10 rounded-full">
                        <div class="flex-1">
                            <div class="font-medium">钓鱼达人</div>
                            <div class="text-xs opacity-70">2小时前 · 杭州西湖</div>
                        </div>
                        <button class="text-gray-300">
                            <i class="fas fa-ellipsis-h"></i>
                        </button>
                    </div>
                    <p class="mb-3 text-sm">今天在西湖收获满满！🎣 天气晴朗，微风，鱼儿活跃度很高。用的蚯蚓做饵料，连钓了5条鲫鱼！</p>
                    <div class="grid grid-cols-3 gap-2 mb-3">
                        <img src="https://images.unsplash.com/photo-1544552866-d3ed42536cfd?w=300&h=200&fit=crop" 
                             class="w-full h-20 object-cover rounded-lg">
                        <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=300&h=200&fit=crop" 
                             class="w-full h-20 object-cover rounded-lg">
                        <img src="https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=300&h=200&fit=crop" 
                             class="w-full h-20 object-cover rounded-lg">
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <div class="flex items-center space-x-4">
                            <button class="flex items-center space-x-1 text-red-300">
                                <i class="fas fa-heart"></i>
                                <span>128</span>
                            </button>
                            <button class="flex items-center space-x-1 text-blue-300">
                                <i class="fas fa-comment"></i>
                                <span>23</span>
                            </button>
                            <button class="flex items-center space-x-1 text-green-300">
                                <i class="fas fa-share"></i>
                                <span>8</span>
                            </button>
                        </div>
                        <button class="text-yellow-300">
                            <i class="fas fa-star"></i>
                        </button>
                    </div>
                </div>

                <!-- 动态2 -->
                <div class="glass-effect rounded-2xl p-4 text-white card-hover">
                    <div class="flex items-center space-x-3 mb-3">
                        <img src="https://images.unsplash.com/photo-1494790108755-2616b612b05b?w=40&h=40&fit=crop&crop=face" 
                             class="w-10 h-10 rounded-full">
                        <div class="flex-1">
                            <div class="font-medium">西湖老钓</div>
                            <div class="text-xs opacity-70">5小时前 · 西溪湿地</div>
                        </div>
                        <button class="text-gray-300">
                            <i class="fas fa-ellipsis-h"></i>
                        </button>
                    </div>
                    <p class="mb-3 text-sm">分享一个钓黑鱼的小技巧：选择有水草的区域，使用路亚假饵慢慢拖拽，效果很不错！今天钓到一条2斤重的黑鱼 💪</p>
                    <div class="mb-3">
                        <img src="https://images.unsplash.com/photo-1535591273668-578e31182c4f?w=600&h=300&fit=crop" 
                             class="w-full h-40 object-cover rounded-lg">
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <div class="flex items-center space-x-4">
                            <button class="flex items-center space-x-1 text-red-300">
                                <i class="fas fa-heart"></i>
                                <span>95</span>
                            </button>
                            <button class="flex items-center space-x-1 text-blue-300">
                                <i class="fas fa-comment"></i>
                                <span>15</span>
                            </button>
                            <button class="flex items-center space-x-1 text-green-300">
                                <i class="fas fa-share"></i>
                                <span>6</span>
                            </button>
                        </div>
                        <button class="text-yellow-300">
                            <i class="fas fa-star"></i>
                        </button>
                    </div>
                </div>

                <!-- 动态3 -->
                <div class="glass-effect rounded-2xl p-4 text-white card-hover">
                    <div class="flex items-center space-x-3 mb-3">
                        <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop&crop=face" 
                             class="w-10 h-10 rounded-full">
                        <div class="flex-1">
                            <div class="font-medium">钓王张三</div>
                            <div class="text-xs opacity-70">1天前 · 千岛湖</div>
                        </div>
                        <button class="text-gray-300">
                            <i class="fas fa-ellipsis-h"></i>
                        </button>
                    </div>
                    <p class="mb-3 text-sm">千岛湖钓鱼两日游结束！这次收获了草鱼、鲤鱼、鲫鱼共15条，重量超过10公斤！风景美、鱼又多，真是钓鱼人的天堂！🏞️</p>
                    <div class="grid grid-cols-2 gap-2 mb-3">
                        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=300&h=200&fit=crop" 
                             class="w-full h-24 object-cover rounded-lg">
                        <img src="https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=300&h=200&fit=crop" 
                             class="w-full h-24 object-cover rounded-lg">
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <div class="flex items-center space-x-4">
                            <button class="flex items-center space-x-1 text-red-300">
                                <i class="fas fa-heart"></i>
                                <span>256</span>
                            </button>
                            <button class="flex items-center space-x-1 text-blue-300">
                                <i class="fas fa-comment"></i>
                                <span>42</span>
                            </button>
                            <button class="flex items-center space-x-1 text-green-300">
                                <i class="fas fa-share"></i>
                                <span>18</span>
                            </button>
                        </div>
                        <button class="text-yellow-300">
                            <i class="fas fa-star"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 话题内容 -->
        <div id="topics-content" class="tab-content hidden">
            <div class="space-y-4">
                <!-- 热门话题 -->
                <div class="glass-effect rounded-2xl p-4 text-white">
                    <h2 class="text-lg font-semibold mb-4">热门话题</h2>
                    <div class="space-y-3">
                        <div class="bg-white/10 rounded-xl p-3 card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="font-medium">#春季钓鱼技巧</div>
                                    <div class="text-sm opacity-80">1.2万讨论</div>
                                </div>
                                <i class="fas fa-fire text-orange-300 text-xl"></i>
                            </div>
                        </div>
                        <div class="bg-white/10 rounded-xl p-3 card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="font-medium">#路亚钓法分享</div>
                                    <div class="text-sm opacity-80">8.5k讨论</div>
                                </div>
                                <i class="fas fa-trending-up text-green-300 text-xl"></i>
                            </div>
                        </div>
                        <div class="bg-white/10 rounded-xl p-3 card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="font-medium">#钓具推荐</div>
                                    <div class="text-sm opacity-80">6.8k讨论</div>
                                </div>
                                <i class="fas fa-chart-line text-blue-300 text-xl"></i>
                            </div>
                        </div>
                        <div class="bg-white/10 rounded-xl p-3 card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="font-medium">#钓点推荐</div>
                                    <div class="text-sm opacity-80">5.2k讨论</div>
                                </div>
                                <i class="fas fa-map-marker-alt text-purple-300 text-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 话题讨论 -->
                <div class="glass-effect rounded-2xl p-4 text-white">
                    <h2 class="text-lg font-semibold mb-4">最新讨论</h2>
                    <div class="space-y-3">
                        <div class="bg-white/10 rounded-xl p-3">
                            <div class="flex items-center space-x-2 mb-2">
                                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=24&h=24&fit=crop&crop=face" 
                                     class="w-6 h-6 rounded-full">
                                <span class="text-sm font-medium">钓鱼达人</span>
                                <span class="text-xs opacity-60">在 #春季钓鱼技巧</span>
                            </div>
                            <p class="text-sm">春季钓鱼应该选择什么时间段最好？我通常选择早晨6-8点和傍晚5-7点，大家有什么经验分享？</p>
                            <div class="flex items-center space-x-4 mt-2 text-xs opacity-80">
                                <span>15回复</span>
                                <span>2小时前</span>
                            </div>
                        </div>
                        <div class="bg-white/10 rounded-xl p-3">
                            <div class="flex items-center space-x-2 mb-2">
                                <img src="https://images.unsplash.com/photo-1494790108755-2616b612b05b?w=24&h=24&fit=crop&crop=face" 
                                     class="w-6 h-6 rounded-full">
                                <span class="text-sm font-medium">西湖老钓</span>
                                <span class="text-xs opacity-60">在 #路亚钓法分享</span>
                            </div>
                            <p class="text-sm">路亚竿的调性选择很重要，ML调性适合钓鲈鱼，M调性适合钓黑鱼。新手建议从ML开始。</p>
                            <div class="flex items-center space-x-4 mt-2 text-xs opacity-80">
                                <span>8回复</span>
                                <span>4小时前</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 排行内容 -->
        <div id="ranking-content" class="tab-content hidden">
            <div class="space-y-4">
                <!-- 钓友排行 -->
                <div class="glass-effect rounded-2xl p-4 text-white">
                    <h2 class="text-lg font-semibold mb-4">本月钓友排行</h2>
                    <div class="space-y-3">
                        <div class="flex items-center space-x-3 bg-white/10 rounded-xl p-3">
                            <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center font-bold">1</div>
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=40&h=40&fit=crop&crop=face" 
                                 class="w-10 h-10 rounded-full">
                            <div class="flex-1">
                                <div class="font-medium">钓鱼达人</div>
                                <div class="text-sm opacity-80">收获 156 条</div>
                            </div>
                            <div class="text-right">
                                <div class="text-lg font-bold text-yellow-300">2580</div>
                                <div class="text-xs opacity-80">积分</div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-3 bg-white/10 rounded-xl p-3">
                            <div class="w-8 h-8 bg-gray-400 rounded-full flex items-center justify-center font-bold">2</div>
                            <img src="https://images.unsplash.com/photo-1494790108755-2616b612b05b?w=40&h=40&fit=crop&crop=face" 
                                 class="w-10 h-10 rounded-full">
                            <div class="flex-1">
                                <div class="font-medium">西湖老钓</div>
                                <div class="text-sm opacity-80">收获 142 条</div>
                            </div>
                            <div class="text-right">
                                <div class="text-lg font-bold text-gray-300">2380</div>
                                <div class="text-xs opacity-80">积分</div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-3 bg-white/10 rounded-xl p-3">
                            <div class="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center font-bold">3</div>
                            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=40&h=40&fit=crop&crop=face" 
                                 class="w-10 h-10 rounded-full">
                            <div class="flex-1">
                                <div class="font-medium">钓王张三</div>
                                <div class="text-sm opacity-80">收获 138 条</div>
                            </div>
                            <div class="text-right">
                                <div class="text-lg font-bold text-orange-300">2180</div>
                                <div class="text-xs opacity-80">积分</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 钓点排行 -->
                <div class="glass-effect rounded-2xl p-4 text-white">
                    <h2 class="text-lg font-semibold mb-4">热门钓点</h2>
                    <div class="space-y-3">
                        <div class="bg-white/10 rounded-xl p-3">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="font-medium">杭州西湖</div>
                                    <div class="text-sm opacity-80">1.2k 钓友打卡</div>
                                </div>
                                <div class="text-right">
                                    <div class="text-sm font-medium text-green-300">95%</div>
                                    <div class="text-xs opacity-80">成功率</div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-white/10 rounded-xl p-3">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="font-medium">千岛湖</div>
                                    <div class="text-sm opacity-80">850 钓友打卡</div>
                                </div>
                                <div class="text-right">
                                    <div class="text-sm font-medium text-green-300">92%</div>
                                    <div class="text-xs opacity-80">成功率</div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-white/10 rounded-xl p-3">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="font-medium">西溪湿地</div>
                                    <div class="text-sm opacity-80">620 钓友打卡</div>
                                </div>
                                <div class="text-right">
                                    <div class="text-sm font-medium text-green-300">88%</div>
                                    <div class="text-xs opacity-80">成功率</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 发布动态模态框 -->
    <div id="postModal" class="fixed inset-0 z-50 hidden">
        <div class="absolute inset-0 bg-black/50" onclick="closePostModal()"></div>
        <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 max-h-[80vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-xl font-semibold">发布动态</h3>
                <button onclick="closePostModal()" class="text-gray-400 text-xl">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form class="space-y-4">
                <div>
                    <textarea placeholder="分享你的钓鱼经历..." rows="4" class="w-full p-3 border border-gray-300 rounded-lg"></textarea>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">添加图片</label>
                    <div class="grid grid-cols-3 gap-2">
                        <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center border-2 border-dashed border-gray-300">
                            <i class="fas fa-plus text-gray-400 text-xl"></i>
                        </div>
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">添加位置</label>
                    <input type="text" placeholder="选择钓鱼地点" class="w-full p-3 border border-gray-300 rounded-lg">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">添加话题</label>
                    <div class="flex flex-wrap gap-2 mb-2">
                        <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">#春季钓鱼</span>
                        <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">#西湖钓鱼</span>
                    </div>
                    <input type="text" placeholder="输入话题标签" class="w-full p-3 border border-gray-300 rounded-lg">
                </div>
                
                <div class="flex space-x-3 pt-4">
                    <button type="button" onclick="closePostModal()" class="flex-1 py-3 border border-gray-300 rounded-lg text-gray-700">取消</button>
                    <button type="submit" class="flex-1 py-3 bg-blue-500 text-white rounded-lg">发布</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-lg border-t border-gray-200">
        <div class="flex items-center justify-around p-2">
            <a href="index.html" class="flex flex-col items-center p-2 text-gray-400">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <button class="flex flex-col items-center p-2 text-gray-400">
                <i class="fas fa-map text-xl"></i>
                <span class="text-xs mt-1">地图</span>
            </button>
            <button class="flex flex-col items-center p-2 text-gray-400">
                <i class="fas fa-plus-circle text-2xl"></i>
                <span class="text-xs">记录</span>
            </button>
            <button class="flex flex-col items-center p-2 text-gray-400">
                <i class="fas fa-bell text-xl"></i>
                <span class="text-xs mt-1">通知</span>
            </button>
            <button class="flex flex-col items-center p-2 text-blue-500">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </button>
        </div>
    </div>

    <script>
        // 标签页切换
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const tab = this.dataset.tab;
                
                // 移除所有活动状态
                document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('tab-active'));
                document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));
                
                // 添加当前活动状态
                this.classList.add('tab-active');
                document.getElementById(tab + '-content').classList.remove('hidden');
            });
        });

        function openPostModal() {
            document.getElementById('postModal').classList.remove('hidden');
        }

        function closePostModal() {
            document.getElementById('postModal').classList.add('hidden');
        }
    </script>
</body>
</html> 